<template>
	<view class="order_container">
		<view class="order_box">
			<view class="order_tab_box">
				<view class="order_tab_all" v-for="(item, index) in tabList" :key="index"
					:class="[currentTab == index ? 'order_tab_all_active' : '']" @click="changeTab(item, index)">
					{{ item.name }}
					<view class="tab_line"></view>
				</view>
			</view>
			<view class="order_list_box" v-for="item in packageList" :key="item.id">
				<view class="express_delivery" v-if="item.express_no">
					{{ item.express_name }} {{ item.express_no }}
				</view>

				<view class="shop_title_box">
					<view class="left_box">
						<view class="shop_icon_box">
							<image src="/static/my/icon-shop.png" mode="" class="shop_icon"></image>
						</view>
						<view class="shop_title">
							{{ shopName }}
						</view>
						<view class="shop_arrow_box">
							<image src="/static/my/icon-arrow.png" mode="" class="shop_arrow"></image>
						</view>
					</view>
					<view class="right_box">
						<span v-if="item.open_status == 0">待开卡</span>
						<span v-else-if="item.open_status == 1">开卡中</span>
						<span v-else-if="item.open_status == 2">已发货</span>
						<span
							v-else-if="item.open_status == 3 || item.open_status == 4 || item.open_status == 8">开卡失败</span>
					</view>
				</view>

				<view class="shop_detail_box">
					<view class="detail_left_box">
						<view class="shop_package_img_box">
							<image
								:src="item.packages.head_img ? imageUrl.packagesImgUrl + item.packages.head_img : imageUrl.packagesImgUrl + item.packages.image"
								mode="" class="shop_package_img"></image>
						</view>
						<view class="shop_package_title">
							{{ item.packages.name }}
						</view>
					</view>
					<view class="detail_right_box">
						<view class="shop_price">
							￥<span style="font-size: 33rpx;">{{ item.packages.price }}</span>
						</view>
						<view class="shop_num">
							x<span style="font-size: 23rpx;">1</span>
						</view>
					</view>
				</view>

				<view class="fail_detail" v-if="item.open_status == 3 || item.open_status == 8">
					失败原因：{{ item.open_message  }}
				</view>

				<view class="shop_price_box">
					<view class="left_box">
						总价￥{{ item.allPrice }}，优惠￥{{ item.preferentialPrice }}
					</view>

					<view class="right_box">
						<view class="price_title">
							实付款：
						</view>
						<view class="price_num">
							￥<span style="font-size: 33rpx;">0</span>
						</view>
					</view>
				</view>
				<!-- </view> -->
			</view>
		</view>
		<!-- 客服图标 -->
		<!-- <view class="custom_img_box">
			<view class="custom_img_all">
				<image src="/static/my/img-custom.png" mode="" class="custom_img"></image>
			</view>
			<view class="custom_btn">
				<button open-type="im" :data-im-id="kefuNum" bindim="imCallback" binderror="onimError"
					style="width: 80rpx;height: 80rpx;">
					客
				</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	import imgUrl from '@/utils/image.js'
	import baseAgentId from '@/utils/agentId.js'
	export default {
		data() {
			return {
				currentTab: 1,
				tabList: [{
						name: '全部'
					},
					{
						name: '待开卡'
					},
					{
						name: '开卡中'
					},
					{
						name: '开卡失败'
					},
					{
						name: '已发货'
					},
				],
				packageList: [],
				imageUrl: '',
				shopName: uni.getStorageSync('channeInfo').name,
				orderIndex: null,
				kefuNum: '', // 客服抖音号
				appId: 'ks697213517937611366',
				secret: 'Cw9FGS5TbboBa8Zgb_ZvQQ',
			}
		},
		onLoad(option) {
			this.imageUrl = imgUrl
			this.getCustom()
			const that = this
			if (JSON.parse(decodeURIComponent(option.status))) {
				this.currentTab = JSON.parse(decodeURIComponent(option.status)).id
				that.getOrder()
			} else {
				this.currentTab = 0
				that.getOrder()
			}
		},
		methods: {
			// 获取客服
			getCustom() {
				this.$request('/kefu', {
					app_id: this.appId
				}, 'GET').then(res => {
					if (res.code == 1) {
						this.kefuNum = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return
					}
				})
			},

			// 获取订单列表
			getOrder() {
				this.$request('/order', {
					open_id: uni.getStorageSync('openId'),
					status: this.currentTab,
					agent_id: baseAgentId.agentId
				}, 'GET').then(res => {
					this.packageList = res
				})
			},

			// 切换tab
			changeTab(item, index) {
				this.currentTab = index
				this.getOrder()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_container {
		padding: 11rpx 20rpx 120rpx;

		.order_box {

			.order_tab_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				border: 1px solid #F6F6F6;
				box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
				border-radius: 12rpx;
				padding: 35rpx 27rpx 0 39rpx;

				.order_tab_all {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;

					.tab_line {
						width: 24rpx;
						height: 6rpx;
						background: transparent;
						border-radius: 3rpx;
						margin-top: 20rpx;
					}
				}

				.order_tab_all_active {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FF4B4B;

					.tab_line {
						width: 24rpx;
						height: 6rpx;
						background: #FF4B4B;
						border-radius: 3rpx;
						margin-top: 20rpx;
					}
				}
			}

			.order_list_box {
				background: #FFFFFF;
				border: 1px solid #F6F6F6;
				box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
				border-radius: 12rpx;
				padding: 41rpx 27rpx 30rpx 31rpx;
				margin-bottom: 20rpx;

				.express_delivery {
					font-size: 28rpx;
					color: #949494;
					padding-bottom: 10rpx;
					border-bottom: 1px solid #f6f6f6;
				}

				.shop_title_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 10rpx;

					.left_box {
						display: flex;
						align-items: center;

						.shop_icon_box {
							width: 26rpx;
							height: 26rpx;

							.shop_icon {
								width: 100%;
								height: 100%;
							}
						}

						.shop_title {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							padding-left: 10rpx;
						}

						.shop_arrow_box {
							width: 30rpx;
							height: 30rpx;

							.shop_arrow {
								width: 100%;
								height: 100%;
							}
						}
					}

					.right_box {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FF4B4B;
					}
				}

				.shop_detail_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F2F2F2;
					padding: 27rpx 0 36rpx;

					.detail_left_box {
						display: flex;
						align-items: center;

						.shop_package_img_box {
							width: 120rpx;
							height: 120rpx;
							margin-right: 42rpx;

							.shop_package_img {
								width: 100%;
								height: 100%;
							}
						}

						.shop_package_title {
							width: 270rpx;
							height: 50rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}

					.detail_right_box {

						.shop_price {
							font-size: 21rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}

						.shop_num {
							font-size: 16rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #B3B3B3;
							text-align: right;
							padding-top: 21rpx;
						}
					}
				}

				.fail_detail {
					font-size: 28rpx;
					color: #ff6a6a;
					padding-top: 10rpx;
				}

				.shop_price_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0 0;

					.left_box {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #B3B3B3;
						opacity: 0;
					}

					.right_box {
						display: flex;
						align-items: center;

						.price_title {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}

						.price_num {
							font-size: 21rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
		}

		.custom_img_box {
			position: fixed;
			right: 32rpx;
			bottom: 230rpx;

			.custom_img_all {
				width: 106rpx;
				height: 106rpx;

				.custom_img {
					width: 100%;
					height: 100%;
				}
			}

			.custom_btn {
				position: absolute;
				top: 14rpx;
				left: 12rpx;
				opacity: 0;
			}
		}
	}
</style>